// 定义一个全局的指令插件
import { useIntersectionObserver } from '@vueuse/core'
const directivePlugin = {
  install(app) {
    console.log('插件被注册了', app)
    // 注册指令
    app.directive('img-lazy', {
      // <img v-img-lazy="imgurl">当指令正式挂载到dom上时,自动触发这个mounted钩子函数
      mounted(el, binging) {
        // el:绑定谁身上就指代哪个dom元素
        // binging.value :指令等于号后面绑定的表达式的值 imgUrl
        // console.log(el, binging)
        // 图片只有进入到视口区域才会正式加载
        // 1.如何知道图片进入视口区域
        // 2.如何让让一个蹄片正式发送请求
        // 解决1.vueuse 2.img.src = "url"
        useIntersectionObserver(
          el,
          ([{ isIntersecting }], observerElement) => {
            // console.log(isIntersecting)
            // isIntersecting 是布尔值 true代表进入到视口区域
            if (isIntersecting) {
              el.src = binging.value
            }
          }
        )
      }
    })
  }
}
export default directivePlugin
